<script setup lang="ts">
import { ref, toRaw } from 'vue';
import { showToast } from 'vant';
import { onMounted } from 'vue';
import { onBeforeUnmount } from 'vue';
import { dynamicncStore, publishncStore, essayncStore } from '@/stores/publish'
import { informationStore } from '../stores/information'
import { followDesignerStore } from '@/stores/userInfo'
import router from '@/router';
import 'vant/es/toast/style'


// 跳转
const goPage = (path: any) => {
    if (path == null) {
        router.back();
    } else {
        router.push(path);
    }
}

// 分享
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option: any) => {
    showToast(option.name);
    showShare.value = false;
};


let commentList: any = toRaw(publishncStore().$state.publishnc);

let ess: any = toRaw(essayncStore().$state.essaync);
console.log(ess);


let dy: any = dynamicncStore().$state.dynamicnc;

let active = ref(0);


// 导航栏显示
let flan = ref(false);

let watchScrollTop = () => {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop >= 400) {
        flan.value = true;
    } else {
        flan.value = false;
    }
}


//长按事件（起始）
const longFunc = () => {
    console.log('长按');

}


let informa = toRaw(informationStore().$state.information);
console.log(informa);

// 关注数
let followList: any = toRaw(followDesignerStore().$state.followDesignerStore).length

// 删除
let remove = (index: any) => {
    let obj = JSON.parse(localStorage.getItem('user') || '{}')
    obj.stat.splice(index, 1);
    localStorage.setItem("user", JSON.stringify(obj));

    dy.splice(index, 1);

    showToast("删除成功")
}


onMounted(() => {
    window.addEventListener('scroll', watchScrollTop);
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', watchScrollTop);
})

</script>

<template>
    <div class="conter">
        <div :class="['conter_title', flan == true ? 'wid' : '']">
            <div class="conter_title_left">
                <img src="../assets//images/conter/ic_creator_center_back.png" @click="goPage(null)">
                <span v-show="flan">{{ informa.nic }}</span>
            </div>
            <img src="../assets//images//conter//icon_share.png">
        </div>
        <div class="conter_bg"><img :src="informa.cover.content || informa.cover"></div>
        <div class="conter_con">
            <div class="conter_con_top">
                <img :src="informa.toux.content || informa.toux">
                <span @click="goPage('/edit')">编辑资料</span>
            </div>
            <div class="conter_con_name">{{ informa.nic }}
                <div class="ich_sex">
                    <img v-if="informa.sex == '女'" src="../assets/images/conter/ich_sex_famale.png">
                    <img v-if="informa.sex == '男'" src="../assets/images/conter/ich_sex_male.png">
                </div>
            </div>
            <div class="conter_con_ion">
                <span><i>{{ followList }}</i>关注</span>
                <span><i>0</i>被关注</span>
                <span><i>0</i>获赞</span>
            </div>

            <div class="jianjie">{{ informa.intro }}</div>

            <div class="conter_con_fkue">
                <div class="conter_con_fkue_item" @click="goPage('/RreleaseView')">
                    <div class="conter_con_fkue_item_top">
                        <p>我的状态</p>
                        <div>发现更多同好</div>
                    </div>
                    <div class="conter_con_fkue_item_botton">
                        <img src="../assets/images/conter/ic_house_tools_add.png">
                        <img src="../assets//images//conter/ic_tab__circle_normal.png">
                    </div>
                </div>

                <div class="conter_con_fkue_item" @click="goPage('/Rreleaser')">
                    <div class="conter_con_fkue_item_top">
                        <p>装修日记</p>
                        <div>记录家的装修</div>
                    </div>
                    <div class="conter_con_fkue_item_botton">
                        <img src="../assets/images/conter/ic_house_tools_add.png">
                        <img src="../assets//images//conter/ic_tab__circle_normal.png">
                    </div>
                </div>

                <div class="conter_con_fkue_item" @click="goPage('/Rreleasers')">
                    <div class="conter_con_fkue_item_top">
                        <p>我的文章</p>
                        <div>发现更多文章</div>
                    </div>
                    <div class="conter_con_fkue_item_botton">
                        <img src="../assets/images/conter/ic_house_tools_add.png">
                        <img src="../assets//images//conter/ic_tab__circle_normal.png">
                    </div>
                </div>
            </div>

            <div class="conter_con_tive">
                <span @click="active = 0" :class="active == 0 ? 'active' : ''">动态</span>
                <span @click="active = 1" :class="active == 1 ? 'active' : ''">日记</span>
                <span @click="active = 2" :class="active == 2 ? 'active' : ''">文章</span>
            </div>

            <div class="conter_con_list" v-show="active == 0">
                <div class="conter_con_list_null" v-if="dy.length == 0">
                    <img src="../assets/images/conter/icon_no_permission.png">
                </div>

                <div class="conter_con_list_item" v-else v-for="(item, index) in dy" :key="index">
                    <div class="item_title">
                        <div class="left">
                            <img :src="informa.toux.content || informa.toux">
                            <div>
                                <p>{{ informa.nic }}</p>
                                <span @click="remove(index)">删除</span>
                            </div>
                        </div>
                        <span class="right iconfont icon-gengduo"></span>
                    </div>
                    <!-- 内容介绍 -->
                    <div class="txt">
                        <h3>{{ item.title }}</h3>
                        <van-text-ellipsis rows="4" :content="item.content" expand-text="展开" collapse-text="收起" />
                    </div>

                    <div class="image_bottom">
                        <img v-for="(img, index) in item.pics" :key="index" :src="img.content">
                    </div>

                    <!-- 评论内容 -->
                    <!-- <div class="criticism">
                        <div class="list">
                            <img src="../assets/images/Home-Icon/Individual-bs.jpg">
                            <span>沙雕<i>&nbsp;:&nbsp;</i></span>
                            <p class="one-txt-cut">沙雕</p>
                        </div>
                    </div> -->

                    <!-- 评论点赞收藏按钮 -->
                    <div class="chatbtn">
                        <div class="fot"><input type="text" placeholder="一起聊聊..."></div>
                        <div class="change review">
                            <img src="../assets/images/Home-Icon/icon_company_consult.png">
                            评论
                        </div>
                        <div class="change collect">
                            <img src="../assets/images/Home-Icon/ich_star_not_fav.png">
                            收藏
                        </div>
                        <div class="change upvote">
                            <img src="../assets/images/Home-Icon/icon_like_n.png">
                            点赞
                        </div>
                    </div>
                </div>
            </div>

            <div class="conter_con_listtwo" v-show="active == 1">
                <div class="diary_null"
                    v-if="commentList[0].length == 0 && commentList[1].length == 0 && commentList[2].length == 0 && commentList[3].length == 0 && commentList[4].length == 0">
                    暂时还没有内容哦！
                </div>
                <div class="diary_list">
                    <div class="diary_list_item" v-if="commentList[0].length !== 0">
                        <p>开工前</p>
                        <div class="diary_item_syle" v-for="(item, index) in commentList[0]" :key="index">
                            <div class="syle_title">{{ item.title }}</div>
                            <div class="syle_con">{{ item.content }}</div>
                            <img :src="item.pics[0].content">
                        </div>
                    </div>
                    <div class="diary_list_item" v-if="commentList[1].length !== 0">
                        <p>施工中</p>
                        <div class="diary_item_syle" v-for="(item, index) in commentList[1]" :key="index">
                            <div class="syle_title">{{ item.title }}</div>
                            <div class="syle_con">{{ item.content }}</div>
                            <img :src="item.pics[0].content">
                        </div>
                    </div>
                    <div class="diary_list_item" v-if="commentList[2].length !== 0">
                        <p>买建材</p>
                        <div class="diary_item_syle" v-for="(item, index) in commentList[2]" :key="index">
                            <div class="syle_title">{{ item.title }}</div>
                            <div class="syle_con">{{ item.content }}</div>
                            <img :src="item.pics[0].content">
                        </div>
                    </div>
                    <div class="diary_list_item" v-if="commentList[3].length !== 0">
                        <p>家电软装</p>
                        <div class="diary_item_syle" v-for="(item, index) in commentList[3]" :key="index">
                            <div class="syle_title">{{ item.title }}</div>
                            <div class="syle_con">{{ item.content }}</div>
                            <img :src="item.pics[0].content">
                        </div>
                    </div>
                    <div class="diary_list_item" v-if="commentList[4].length !== 0">
                        <p>入住新家</p>
                        <div class="diary_item_syle" v-for="(item, index) in commentList[4]" :key="index">
                            <div class="syle_title">{{ item.title }}</div>
                            <div class="syle_con">{{ item.content }}</div>
                            <img :src="item.pics[0].content">
                        </div>
                    </div>
                </div>
            </div>

            <div class="conter_con_listthree" v-show="active == 2">
                <div class="diary_null" v-if="ess == 0">
                    暂时还没有内容哦！
                </div>
                <div class="list" v-else>
                    <div class="item" v-for="(item, index) in ess" :key="index">
                        <img v-for="(img, index) in item.pics" :key="index" :src="img.content">
                        <p class="txt-cut">{{ item.content }}</p>
                        <div class="recommend_meage">
                            <div class="recommend_meage_left">
                                <img :src="informa.toux.content || informa.toux">
                                <div class="recommend_meage_name">{{ informa.nic }}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分享 -->
        <!-- <van-cell title="显示分享面板" @click="showShare = true" /> -->
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    </div>
</template>

<style lang="scss" scoped>
.conter_title {
    padding: 0px 12px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    background-color: transparent;

    &.wid {
        background-color: white;
    }

    .conter_title_left {
        display: flex;
        line-height: 40px;

        span {
            margin-left: 6px;
            font-weight: 700;
            font-size: 20px;
        }
    }

    img {
        margin: 5px 0px;
        width: 30px;
        height: 30px;
        display: block;
    }
}

.conter_bg {
    width: 100%;
    height: 200px;
    overflow: hidden;

    img {
        width: 100%;
        height: 100p;
        display: block;
    }
}

.conter_con {
    background-color: #f7f7fb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translateY(-14px);

    .conter_con_top {
        padding: 0px 12px;
        padding-top: 15px;
        position: relative;
        display: flex;
        justify-content: end;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #fff;

        img {
            width: 80px;
            height: 80px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: -40px;
            left: 12px;
            object-fit: cover;
            object-position: top;
        }

        span {
            padding: 3px 30px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 20px;
            color: #fff;
            background-color: #12c1b6;
        }
    }

    .conter_con_name {
        padding: 0px 12px;
        padding-top: 10px;
        display: flex;
        font-size: 20px;
        font-weight: 700;
        background-color: #fff;

        .ich_sex {
            margin-top: 5px;
            margin-left: 10px;
            position: relative;
            width: 15px;
            height: 15px;
            display: block;

            img {
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
            }
        }
    }

    .jianjie {
        padding: 0 12px;
        padding-top: 10px;
        background-color: #fff;
        font-size: 14px;
        color: #999;
    }

    .conter_con_ion {
        padding: 0px 12px;
        padding-top: 5px;
        font-size: 14px;
        background-color: #fff;

        span {
            margin-right: 10px;
            color: #999;
        }

        i {
            margin-right: 2px;
            font-size: 15px;
            font-weight: 700;
            color: #000;
        }
    }

    .conter_con_tive {
        padding: 0px 12px;
        padding-top: 20px;
        height: 25px;
        background-color: #fff;

        span {
            margin-right: 10px;
            padding-bottom: 5px;
            border-bottom: 3px solid transparent;

            &.active {
                font-weight: 700;
                border-bottom: 3px solid black;
            }
        }
    }

    .conter_con_fkue {
        padding: 0px 12px;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
    }

    .conter_con_fkue_item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: white;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
        box-shadow: -1px -1px 1px #ccc;
    }

    .conter_con_fkue_item_top {
        margin-top: 8px;
        padding: 0px 12px;

        p {
            font-size: 14px;
        }

        div {
            font-size: 12px;
            color: #999;
        }
    }

    .conter_con_fkue_item_botton {
        padding-left: 12px;
        display: flex;
        justify-content: space-between;

        img {
            width: 30px;
            height: auto;
            display: block;

            &:first-child {
                margin-top: 4px;
                height: 20px;
            }
        }
    }

    .conter_con_list {
        padding: 0 12px;
    }

    .conter_con_list_null {
        margin-top: 100px;
        display: flex;
        justify-content: center;

        img {
            width: 200px;
            height: 200px;
            display: block;
            margin-bottom: 100px;
        }
    }

    .conter_con_list_item {
        margin-top: 8px;
        background-color: #f7f7fb;

        .item_title {
            padding: 10px 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;

                img {
                    width: 45px;
                    height: 45px;
                    display: block;
                    border-radius: 50%;
                }

                div {
                    margin-left: 15px;
                    font-size: 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    p {
                        font-weight: 700;
                        font-size: 16px;
                    }
                }
            }
        }

        .image_top {
            width: 100%;
            height: 130px;

            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        .txt {
            margin-top: 10px;
            padding: 0px 12px;

            h3 {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 10px;
            }

            .van-text-ellipsis {
                font-size: 14px;

                & ::v-deep .van-text-ellipsis__action {
                    color: #12c1b6;
                }
            }
        }

        .image_bottom {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;

            img {
                width: 112px;
                height: 112px;
                margin-bottom: 7px;
                margin-right: 7px;
                border-radius: 5px;

                &:nth-child(3n) {
                    margin-right: 0px;
                }
            }
        }

        .criticism {
            margin: 0 12px;
            background-color: #e9ecf0;
            margin-top: 10px;
            padding: 1px 0px;
            border-radius: 3px;

            .list {
                display: flex;
                margin: 4px 5px;

                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                }

                span {
                    font-size: 13px;
                    color: #898989;
                }

                p {
                    color: #3d3d3d;
                    max-width: 184px;
                }
            }

        }

        .chatbtn {
            display: flex;
            align-items: center;
            padding: 0px 12px;
            margin-top: 15px;
            padding-bottom: 20px;

            .fot {
                flex: 1;
                background-color: #e9ecf0;
                margin-right: 20px;
                border-radius: 20px;
                padding: 4px 0px;
                padding-left: 10px;
                font-size: 14px;
                color: #898989;

                input {
                    width: 90%;
                    height: 100%;
                    border: none;
                    background-color: #e9ecf0;
                }
            }

            .change {
                margin: 0px 5px;
                padding-left: 20px;
                font-size: 14px;
                position: relative;

                img {
                    width: 20px;
                    height: 20px;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
    }
}

.diary_null {
    padding: 100px 0px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.diary_list {
    p {
        margin: 0px;
        height: 22px;
        font-size: 20px;
        font-weight: 700;
        position: sticky;
        top: 0;
        left: 0;
    }

    .diary_list_item {
        margin: 0px 4px;
        margin-top: 10px;
        padding: 0px 8px;
        border-left: 1px solid red;

        p {
            margin: 0px;
            height: 25px;
            font-size: 20px;
            font-weight: 700;
            position: sticky;
            top: 0;
            left: 0;
        }

        p::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: -13px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #3ab6b7;
        }

        p::after {
            content: '';
            display: block;
            position: absolute;
            top: 3px;
            left: -10px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: white;
        }
    }

    .diary_item_syle {
        margin-top: 20px;
        padding-bottom: 10px;

        .syle_title {
            font-size: 16px;
            font-weight: 700;
        }

        .syle_con {
            margin-top: 5px;
            font-size: 14px;
        }

        img {
            margin-top: 8px;
            width: 100px;
            height: 100px;
            display: block;
        }
    }
}

.conter_con_listthree {
    padding: 0px 5px;
    padding-top: 10px;
    background-color: #f7f7fb;

    .list {
        margin-top: 10px;
        column-count: 2;
        column-gap: 10px;
        column-width: 100%;

        .item {
            width: 100%;
            break-inside: avoid;
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;

            img {
                width: 100%;
                height: auto;
                display: block;
            }

            p {
                margin-top: 5px;
                padding: 0px 5px;
                word-wrap: break-word;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }

    .recommend_meage {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;

        .recommend_meage_left {
            display: flex;

            img {
                width: 22px;
                height: 22px;
                display: block;
                border-radius: 50%;
                margin-right: 5px;
            }

            .recommend_meage_name {
                font-size: 12px;
                color: #444;
                max-width: 60px;
            }
        }

        .recommend_meage_right {
            position: relative;

            img {
                margin-right: 30px;
                width: 22px;
                height: 22px;
                display: block;
                position: absolute;
                top: 1px;
                right: 0;
            }

            p {
                font-size: 14px;
                color: #444;
                font-weight: normal;
            }
        }
    }
}
</style>